import React, { PropTypes } from 'react';
import { connect } from 'dva';
// import { Icon } from 'antd-mobile';
import styles from './customsItemPro.css';
import imageCompress from '../../../../../../../../framework/utils/imageCompress';

// const proIcon = require('../../../../../../../../icons/personal/default-avatar.jpg');
const noAvatar = require('../../../../../../../../assets/avatar.jpg');

const customsItemPro = ({
  dispatch,
  imgURL,
  // icon = proIcon,
  textName,
  saveImgUrlInfo=()=>{},
}) => {

  const imgNegative = () => {
    console.log('img click')
    document.getElementById("upload").click();
  }

  const uploadPic = (event) => {
  // console.log('onChange uploadPic')
    let files = event.target.files, file;
    if (files && files.length > 0) {
      imageCompress.convertInputImgae(files, 800, (base64Url,imgURL) => {
        // dispatch({
        //   type:'personal/onUploadImg',
        //   payload:{
        //     base64Url:base64Url,
        //     imgURL:imgURL
        //     }
        //   })
        // });
        saveImgUrlInfo(base64Url,imgURL)
      })
    }
  }

  return(
      <div className={styles.listItem} onClick={() => imgNegative()}>
        <div className={styles.itemText}>
          {textName}
        </div>

        <div className={styles.imgView}>
            <input
            id='upload'
            type='file'
            onChange={(e) => uploadPic(e)}
            style={{display:'none'}}
           />
            <img className={styles.itemIcon} src={imgURL ? imgURL : noAvatar} />
        </div>

      </div>
  )
}

customsItemPro.propTypes = {

};

export default connect()(customsItemPro);
